<template>
    <div class="shop-container">
      <!-- 抽屉式左侧菜单 -->
      <el-drawer
        v-model="drawerVisible"
        :with-header="false"
        :size="240"
        :before-close="handleClose"
        class="shop-drawer"
      >
        <el-menu
          :default-active="$route.path"
          mode="vertical"
          @select="handleNavSelect"
        >
          <el-menu-item index="/shop/products">
            <i class="iconfont icon-product"></i>
            <span>商品列表</span>
          </el-menu-item>
          <el-menu-item index="/shop/myaccount">
            <i class="iconfont icon-account"></i>
            <span>我的账户</span>
          </el-menu-item>
          <el-menu-item index="/shop/cart">
            <i class="iconfont icon-cart"></i>
            <span>购物车</span>
          </el-menu-item>
        </el-menu>
      </el-drawer>
  
      <!-- 主内容区域 -->
      <div class="main-content">
        <router-view />
      </div>
  
      <!-- 底部导航栏 -->
      <el-menu
        :default-active="$route.path"
        mode="horizontal"
        class="bottom-nav"
        @select="handleNavSelect"
      >
        <el-menu-item index="/">
          <i class="iconfont icon-shop"></i>
          <span>商城</span>
        </el-menu-item>
        <el-menu-item index="/edu">
          <i class="iconfont icon-edu"></i>
          <span>农教</span>
        </el-menu-item>
        <el-menu-item index="/community">
          <i class="iconfont icon-community"></i>
          <span>社区</span>
        </el-menu-item>
      </el-menu>
  
      <!-- 移动端触发按钮 -->
      <el-button
        type="primary"
        icon="el-icon-menu"
        class="menu-trigger"
        @click="drawerVisible = true"
      ></el-button>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, watch } from 'vue'
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  const drawerVisible = ref(false) // 初始隐藏抽屉
  
  const handleNavSelect = (key: string) => {
    router.push(key).catch(err => {
      if (!err.message.includes('Avoided redundant navigation')) throw err
    })
    drawerVisible.value = false // 关闭抽屉
  }
  
  const handleClose = () => {
    drawerVisible.value = false
  }
  
  // 监听路由变化自动关闭抽屉
  watch(
    () => router.currentRoute.value.path,
    () => {
      drawerVisible.value = false
    }
  )
  </script>
  
  <style scoped>
  .shop-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
  }
  
  .shop-drawer {
    transition: all 0.3s ease;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    z-index: 1001; /* 确保高于底部导航 */
  }
  
  .main-content {
    flex: 1;
    padding: 20px;
    transition: margin-left 0.3s ease;
    min-height: calc(100vh - 160px);
    padding-bottom: 80px;
  }
  
  .drawer-open + .main-content {
    margin-left: 240px !important;
  }
  
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* 确保低于抽屉 */
    background: #fff !important;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: 10px 0;
  }
  
  .menu-trigger {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1002; /* 确保最高层级 */
    display: none;
    padding: 12px !important;
    background: #fff !important;
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }
  
  /* 移动端适配 */
  @media (max-width: 768px) {
    .menu-trigger {
      display: block; /* 移动端显示按钮 */
    }
    
    .main-content {
      margin-left: 0 !important;
      padding-bottom: 120px !important;
    }
    
    .bottom-nav {
      height: 60px !important;
    }
  }
  </style>